<template>
  <div id="app">
    <vue-seamless-scroll
      ref="scroll"
      :data="logos"
      :class-option="defaultOption"
      style="width: 2000px; height: 280px; margin: 0 auto"
    >
      <img src="../../assets/images/bg_pattern_grass.png" />
      <!-- <ul class="ul-scoll">
        <li v-for="(item, index) in Math.ceil(logos.length / 5)" :key="index">
          
        </li>
      </ul> -->
    </vue-seamless-scroll>
    <!-- <vue-seamless-scroll>
      <img src="../../assets/images/bg_pattern_grass.png" alt="">
    </vue-seamless-scroll> -->
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  data() {
    return {
      logos: ["1"],
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: Math.ceil(this.logos.length / 5), // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="less" scoped>
#app{
  img{
    z-index: -1;
    width: 1200px;
    height: 258px;
  }
}
</style>>